{layout name="layout/header" /}
<link href="root/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="root/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

<div class="wrapper wrapper-content animated fadeInRight" id="app">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>广告设置</h5>
                    <div class="ibox-tools">
                        <a type="button" class="btn btn-primary btn-sm" href="{:url('index')}">返回列表页</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" id="form" >
                        <!--图片上传-->
                        <div class="form-group" v-for="i,k in list">
                            <label class="col-sm-1 control-label">{{i.title}}</label>
                            <div class="col-sm-10">
                                <button class="btn btn-success product_upload_img" type="button">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                                </button>
                                <input @change="upload($event,k)" type="file" style="display: none;"/>
                                <span class="help-block m-b-none">{{i.remark}}</span>
                            </div>
                            <div class="col-sm-11 col-sm-offset-1 ">
                                <div class="row" id="img">
                                    <div class="img_box col-xs-12 col-md-3" v-if="i.value">
                                        <a class="fancybox" :href="i.value">
                                            <img alt="image" :src="i.value"/>
                                        </a>
                                        <a class="glyphicon glyphicon-trash" @click="delImg();"></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <a class="btn btn-primary" type="submit" @click="submit">保存内容</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- iCheck -->
<script src="root/js/plugins/iCheck/icheck.min.js"></script>
<!--layer-->
<script src="root/js/plugins/layer/layer.min.js"></script>

<script src="root/js/plugins/validate/jquery.validate.min.js"></script>
<script src="root/js/plugins/validate/messages_zh.min.js"></script>

<script src="root/js/plugins/fancybox/jquery.fancybox.js"></script>
<script>
    var data = {$data};
    new Vue({
        el:"#app",
        data:{
            list:data,
            a:'',
        },
        methods:{
            submit:function () {
                $("#form").validate({
                    rules:{
                        name:"required",
                        sort:{digits:true}
                    }
                })
                if($("#form").valid()) {
                    $.post("{:url('save')}",data,function (res) {
                        layer.msg(res.msg);

                        if(res.code==1){
                            setTimeout(function () {
                                window.location.href= "{:url('index')}"
                            },1500)
                        }
                    },'json')
                }
            },
            upload:function(e,v) {
                console.log(v);
                var n=e.target.files.length;
                var file;
                for (var i = 0; i < n; i++) {
                    file=event.target.files[i];
                    var img =uploadImage(file);
                    console.log(img);

                    if(img) v.value = img;
                }
                console.log(v);
            },

        },
        mounted:function () {
            $('.fancybox').fancybox({
                openEffect: 'none',
                closeEffect: 'none'
            });
            checks()
        }
    });
    function uploadImage(file) {
        let form_data=new FormData();
        let imgUrl;
        form_data.append("image",file);
        $.ajax({
            url: '/index.php/admin/upload/ajax_upload_img',
            type: 'POST',
            processData: false,
            contentType: false,
            data: form_data,
            dataType:"json",
            success:function (res) {
                // res = JSON.parse(res);
                if(res.code==200){
                    imgUrl = res.data.img_url
                    console.log(imgUrl)
                    return imgUrl;
                }else {
                    layer.msg(res.msg);
                    return;
                }
            }

        })
    }
</script>
